<template>
    <!-- 查询区 -->
    <div class="search">
        <el-form :inline="true" :model="ad" ref="searchfromat">
            <el-form-item label="住客编号" prop="userId">
                <el-input placeholder="请输入住客编号" v-model="ad.userId" />
            </el-form-item>
            <el-form-item label="房间编号" prop="roomId">
                <el-input placeholder="请输入房间编号" v-model="ad.roomId" />
            </el-form-item>
            <el-button type="primary" :icon="Search" style="margin-bottom: 20px;" @click="search()">查询订单</el-button>
            <el-button type="primary" :icon="Refresh" style="margin-bottom: 20px;" @click="restform">重置</el-button>
        </el-form>
    </div>
    <div class="xinzeng" style="position: relative;margin-left: 800px ;margin-top: -52px; ">
        <el-button type="primary" :icon="CirclePlus" @click="addnew"> 添加预约</el-button>
    </div>
    <!-- 表格 -->
    <div class="table" style="margin-top: 5px;">
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="headerCellStyle" align="center"
            ref="table">
            <el-table-column prop="id" label="ID" width="80" align="center" />
            <el-table-column prop="userId" label="住客编号" width="120" align="center" />
            <el-table-column prop="userName" label="住客姓名" width="120" align="center" />
            <el-table-column prop="roomId" label="房间编号" width="120" align="center" />
            <el-table-column prop="roomName" label="房间名称" width="180" align="center" />
            <el-table-column prop="birthFrom" label="入住时间" width="150" align="center" />
            <el-table-column prop="birthTo" label="离店时间" width="180" align="center" />
            <el-table-column prop="description" label="备注" align="center" width="180" />
            <el-table-column fixed="right" label="操作" width="220" align="center" style="border-left: 1px;">
                <!-- 点击时获取这行的数据 -->
                <template v-slot="scope">
                    <el-button type="primary" size="small" @click="edit(scope.row)">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        编辑订单
                    </el-button>
                    <el-button type="danger" size="small" @click="delbyid(scope.row)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        删除订单
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination v-model:current-page="pi.pageNo" v-model:page-size="pi.pageSize"
                :page-sizes="[10, 30, 50, 100]" :total="pi.total" layout="total, sizes, prev, pager, next, jumper"
                background @change="paginate" />
        </div>
        <!-- 修改表单 -->
        <el-dialog v-model="show" :title="title" width="800" draggable :close-on-click-modal="false" @close="close"
            style="margin-bottom: 5px;text-align: center;">
            <el-form :model="aeform" ref="sfRef">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="住客编号：" label-width="100" prop="userId">
                            <el-input v-model="aeform.userId" placeholder="请输入住客编号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="房间编号：" label-width="100" prop="roomId">
                            <el-input v-model="aeform.roomId" placeholder="请输入住房间编号" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="入住日期：" label-width="100" prop="birthFrom">
                        <el-date-picker v-model="aeform.birthFrom" type="date" placeholder="请输入住日期"
                            style="width:100%;"  :disabled-date="disabledDate"  />
                    </el-form-item>
                    <el-form-item label="离店日期：" label-width="100" prop="birthTo">
                        <el-date-picker v-model="aeform.birthTo" type="date" placeholder="请输入离店日期"
                            style="width:100%;" :disabled-date="disabledDate2" />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注：" label-width="100" prop="description">
                            <el-input v-model="aeform.description" style="width: 100%;" :rows="7" type="textarea"
                                placeholder="请输入备注信息"  />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- 对话框的按钮。插槽 -->
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="show = false">取消</el-button>
                    <el-button type="primary" @click="submitForm">确认</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 新增表单 -->
        <el-dialog v-model="showadd" :title="titleadd" width="800" draggable :close-on-click-modal="false"
            @close="closeadd" style="margin-bottom: 5px;text-align: center;">
            <el-form :model="aeformadd" ref="sfRefadd">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="住客编号：" label-width="100" prop="userId">
                            <el-input v-model="aeformadd.userId" placeholder="请输入住客编号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="房间编号：" label-width="100" prop="roomId">
                            <el-input v-model="aeformadd.roomId" placeholder="请输入住房间编号" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="入住日期：" label-width="100" prop="birthFrom">
                        <el-date-picker v-model="aeformadd.birthFrom" type="date" placeholder="请输入住日期"
                            style="width:100%;" :disabled-date="disabledDate3"/>
                    </el-form-item>
                    <el-form-item label="离店日期：" label-width="100" prop="birthTo">
                        <el-date-picker v-model="aeformadd.birthTo" type="date" placeholder="请输入离店日期"
                            style="width:100%;" :disabled-date="disabledDate4" />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注：" label-width="100" prop="description">
                            <el-input v-model="aeformadd.description" style="width: 100%;" :rows="7" type="textarea"
                                placeholder="请输入备注信息" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- 对话框的按钮。插槽 -->
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showadd = false">取消</el-button>
                    <el-button type="primary" @click="submitFormadd">确认</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<script setup >
import { ref, onMounted, nextTick } from "vue"
import { findall, deletebyid, adduser, updateuser } from "@/api/reserveApi"
import { Delete, Edit, Refresh, Search, CirclePlus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
onMounted(() => {
    search();
});

function  disabledDate(date) {
      // 获取当前日期
      const today = new Date();
      today.setHours(0, 0, 0, 0); 
      // 比较传入的日期与今天的日期
      return date < today; 
    }

    function  disabledDate2(date) {
      // 获取当前日期
      const today = new Date();
      today.setHours(0, 0, 0, 0); 
      // 比较传入的日期与今天的日期
      return date < today; 
    }
    function  disabledDate3(date) {
      // 获取当前日期
      const today = new Date();
      today.setHours(0, 0, 0, 0); 
      // 比较传入的日期与今天的日期
      return date < today; 
    }
    function  disabledDate4(date) {
      // 获取当前日期
      const today = new Date();
      today.setHours(0, 0, 0, 0); 
      // 比较传入的日期与今天的日期
      return date < today; 
    }



let tableData = ref();
async function search() {
    let params = ad.value;
    let resp = await findall(pi.value.pageNo, pi.value.pageSize, params);
    tableData.value = resp.data;
    pi.value = resp.pi;
}
//分页
const pi = ref({
    pageNo: 1,
    pageSize: 10,
    total: 0
});
function paginate() {
    search();
}
//表头颜色
function headerCellStyle() {
    return {
        backgroundColor: "#B3CAD8",
        textAlign: "center",
        color: "#fff"
    }
}
//条件查询
let ad = ref({
    roomId: "",
    userId: "",
});
//重置
let searchfromat;
function restform() {
    searchfromat.resetFields();
    search();
}
//删除
function delbyid(row) {
    ElMessageBox.confirm(
        "您确定要删除吗？",
        "确认", {
        type: 'warning',
    }
    ).then(async () => {
        let id = row.id;
        let ids = [];
        ids.push(id);
        let resp = await deletebyid(ids);
        if (resp.success) {
            ElMessage({
                message: "删除成功",
                type: "success"
            });
            //成功之后刷新
            search();
        } else {
            ElMessage({
                message: "删除失败,请联系管理员",
                type: "error"
            });
        }
    })
}
//新增 修改
let show = ref(false);
let showadd = ref(false);
let title = ref("修改预约");
let titleadd = ref("新增预约");
let aeform = ref({
    userId: "",
    RoomName: "",
    phone: "",
    birthFrom: "",
    birthTo: "",
    description: ""
});
let aeformadd = ref({
    userId: "",
    RoomName: "",
    phone: "",
    birthFrom: "",
    birthTo: "",
    description: ""
});
function addnew() {
    titleadd.value = "新增预约";
    showadd.value = true;
}
function edit(row) {
    let rows = Object.assign({}, row);
    //console.log(row);
    show.value = true;
    title.value = "修改预约";
    nextTick(() => {
        aeform.value = rows;
    });

}
let sfRef;//新增和修改表单的实例引用
//关闭对话框时触发此事件
function close() {
    sfRef.resetFields();//重置表单
}
let sfRefadd;//新增和修改表单的实例引用
//关闭对话框时触发此事件
function closeadd() {
    sfRefadd.resetFields();//重置表单
}
async function submitForm() {
    console.log("edit");
    let xxuser = aeform.value;
    //调用修改
    //向后台提交数据
    let resp = await updateuser(xxuser);

    if (resp.success) {
        ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        show.value = false;
    } else {
        ElMessage({
            message: '操作失败，请确认数据完整性或联系管理员',
            type: 'error',
        });
        //show.value = false;
    }
}
async function submitFormadd() {
    console.log("add");
    let addbook = aeformadd.value;
    let resp = await adduser(addbook);
    if (resp.success) {
        ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        showadd.value = false;
    } else {
        ElMessage({
            message: '操作失败，请确认信息完整性或联系管理员',
            type: 'error',
        });
        //showadd.value = false;
    }
}

</script>
<style scoped></style>